<template>
  <div class='app-container'>
    <el-form :model="form" ref="form" label-width="130px" >
      <el-row>
        <el-col :span="12">
          <el-form-item label="物品名称:" prop="articleName"  >
            <el-input v-model="form.articleName" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物品位置:" prop="location"  >
            <el-input v-model="form.location" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!-- 归属部门 -->
          <el-form-item label="物品归属部门:" >
            <treeselect :disabled="true"
              v-model="form.ascriptionDept"
              :options="options"
              placeholder=""
              empty-text=""
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="损坏时间:" >
              <el-date-picker :disabled="true"
                style="width: 100%"
                v-model="form.damageTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

          <el-form-item label="描述:" >
            <el-input type="textarea" v-model="form.description" :disabled="true"></el-input>
          </el-form-item>
         
          <el-form-item label="物品损坏图片:" prop="fileList"  >
            <div>
              <el-image 
                v-for="item in form.fileList" :key="item.name" 
                style="width: 100px; height: 100px"
                :src="item.url"
                :preview-src-list="[item.url]"></el-image>
            </div>
            
          </el-form-item>
          <el-row>
                <el-col :span="12">
                    <el-form-item label="申请人" >
                        {{form.createBy}}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="申请时间">
                        {{parseTime(form.createTime)}}
                    </el-form-item>
                </el-col>
              </el-row>
        </el-form>
  </div>
</template>

<script>
import { treeselectAll } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {Treeselect},
  name:"repairOrderRecords",
  props:{
    form:Object,
    isRepairOrderRecords:Boolean
  },
  data () {
  // 这里存放数据
    return {
      options:[],
      url: process.env.VUE_APP_BASE_API + "/test/uploadImage",
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
   
  },
  // 方法集合
  methods: {
    getTreeselect(){
      treeselectAll().then(resp=>{
        this.options = resp.data
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getTreeselect()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
 
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类

</style>
